<template>
    <div class="app-container">
        <el-card>
            <el-page-header @back="goBack">
                <template #content>
                    <div class="flex items-center">
                        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">

                            {{ route.query.readonly ? '查看供应商' : route.query.id ? '编辑供应商' : '新增供应商' }}
                        </span>
                        <el-tag v-if="route.query.code" :type="tagType" style="margin-left: 10px;">{{ route.query.code
                        }}</el-tag>
                    </div>
                </template>
                <template #extra>
                    <div class="flex items-center">
                        <el-button type="primary" v-if='!route.query.readonly' @click="submitForm">保 存</el-button>
                    </div>
                </template>
            </el-page-header>
        </el-card>
        <el-card style="margin-top: 10px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled  title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">基本信息</span>
                    </template>
                    <div>
                        <el-form :model="form" :rules="rules" :disabled="Boolean(route.query.readonly)" ref="supplierRef"
                            label-width="135px">
                            <el-row :gutter="20">
                                <!-- <el-col :span="8">
                                    <el-form-item label="供应商编号" prop="supplierCode">
                                        <el-input v-model="form.supplierCode" placeholder="请输入供应商编号" maxlength="30" />
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="8">
                                    <el-form-item label="供应商名称" prop="name">
                                        <el-input v-model="form.name" placeholder="请输入供应商名称" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="统一社会信用代码" prop="usci">
                                        <el-input v-model="form.usci" placeholder="请输入统一社会信用代码" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="公司电话" prop="tel">
                                        <el-input v-model="form.tel" placeholder="请输入公司电话" maxlength="18" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="供应类型" prop="type">
                                        <el-select v-model="form.type" class="m-2" placeholder="选择供应类型"
                                            style="width: 100%;">
                                            <el-option v-for="item in mes_supplier_type" :key="item.label"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="供应商简称">
                                        <el-input v-model="form.shortName" placeholder="请输入供应商简称" maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="供应渠道">
                                        <el-input v-model="form.channel" placeholder="请输入供应渠道" maxlength="18" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="开户银行">
                                        <el-input v-model="form.bank" placeholder="请输入开户银行" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="银行账号">
                                        <el-input v-model="form.bankCode" placeholder="请输入银行账号" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="主联系人" prop="mainContact">
                                        <el-input v-model="form.mainContact" placeholder="请输入主联系人" maxlength="30" />
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="联系电话" prop="phone">
                                        <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属地区" prop="area">
                                        <el-input v-model="form.area" placeholder="请输入所属地区" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属公司">
                                        <el-input v-model="form.company" placeholder="请输入所属公司" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="采购专员">
                                        <el-input v-model="form.buyer" placeholder="请输入采购专员" maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="年采购量">
                                        <el-input v-model="form.yearOrderQuantity" type="number" placeholder="请输入年采购量"
                                            maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="期初应付">
                                        <el-input v-model="form.initialPayable" type="number" placeholder="请输入期初应付"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="应付金额">
                                        <el-input v-model="form.payable" type="number" placeholder="请输入应付金额"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="供应地址">
                                        <el-input v-model="form.addr" placeholder="请输入供应地址" maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="公司邮箱" prop="email">
                                        <el-input v-model="form.email" placeholder="请输入公司邮箱" maxlength="30" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">

                                <el-col :span="8">
                                    <el-form-item label="公司传真">
                                        <el-input v-model="form.fax" placeholder="请输入公司传真" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注">
                                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>

                </el-collapse-item>
            </el-collapse>
        </el-card>

        <el-card style="margin-top: 10px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled  title="相关人员" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">相关人员</span>
                    </template>
                    <el-button style="margin-bottom: 5px;" type="primary" size="small" plain icon="Plus"
                        @click="handleAddPerson" :disabled="Boolean(route.query.readonly)">新增</el-button>
                    <el-table :data="supplierPersonList" border style="width: 100%">
                        <el-table-column type="index" width="60" label="序号" align="center">

                        </el-table-column>
                        <el-table-column prop="name" label="姓名" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.name" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" align="center">
                            <template #default="scope">
                                <!-- <el-input v-model="scope.row.sex" :disabled="!scope.row.isDisabled"></el-input> -->
                                <el-select v-model="scope.row.sex" :disabled="!scope.row.isDisabled">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="job" label="职位" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.job" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="birthday" label="出生日期" align="center">
                            <template #default="scope">
                                <!-- <el-input v-model="scope.row.birthday" :disabled="!scope.row.isDisabled"></el-input> -->
                                <el-date-picker style="width:100%" value-format="YYYY-MM-DD" v-model="scope.row.birthday"
                                    :disabled="!scope.row.isDisabled" type="date" placeholder="选择日期" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="tel" label="电话" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.tel" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wechat" label="微信" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.wechat" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" v-if="!route.query.readonly" align="center">
                            <template #default="scope">
                                <el-button v-if="!scope.row.isDisabled" link type="primary" size="small"
                                    @click="handleEdit(scope.row)">编辑</el-button>
                                <!--  <el-button v-else link type="primary" size="small"
                                    @click="handleComplete(scope.row)">完成</el-button> -->
                                <el-button link type="primary" size="small"
                                    @click="handlePersonDel(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-card>

        <el-card style="margin-top: 10px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled  title="相关人员" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">帐期结余</span>
                    </template>
                    <el-button style="margin-bottom: 5px;" type="primary" size="small" plain icon="Plus"
                        @click="handleAddCheck" :disabled="Boolean(route.query.readonly)">新增</el-button>

                    <el-table :data="supplierCheckoutList" border style="width: 100%">
                        <el-table-column type="index" width="60" label="序号" align="center">

                        </el-table-column>
                        <el-table-column prop="checkoutNo" label="结账单号" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.checkoutNo" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="checkoutMonth" label="结账月份" align="center">
                            <template #default="scope">

                                <el-date-picker style="width: 100%;" v-model="scope.row.checkoutMonth"
                                    value-format="YYYY-MM" type="month" :disabled="!scope.row.isDisabled"
                                    placeholder="选择月份" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="checkoutAmount" label="结余金额" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.checkoutAmount" type="number"
                                    :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="checkoutDate" label="结余时间" align="center">
                            <template #default="scope">
                                <!-- <el-input v-model="scope.row.checkoutDate" :disabled="!scope.row.isDisabled"></el-input> -->
                                <el-date-picker style="width:100%" value-format="YYYY-MM-DD"
                                    v-model="scope.row.checkoutDate" :disabled="!scope.row.isDisabled" type="date"
                                    placeholder="选择日期" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="checkoutUser" label="结余人员" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.checkoutUser" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" :disabled="!scope.row.isDisabled"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" v-if="!route.query.readonly" align="center">
                            <template #default="scope">
                                <el-button v-if="!scope.row.isDisabled" link type="primary" size="small"
                                    @click="handleEdit(scope.row)">编辑</el-button>
                                <el-button link type="primary" size="small"
                                    @click="handleCheckDel(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import useTagsViewStore from '@/store/modules/tagsView'
const tagsViewStore = useTagsViewStore()
import { addSupplier, getByIdSupplier } from '@/api/basicInfo/supplier.js'
const { proxy } = getCurrentInstance();
const { mes_supplier_type } = proxy.useDict('mes_supplier_type');
// import useUserStore from '@/store/modules/user'
// const userInfo = useUserStore()
const router = useRouter();
const route = useRoute();
const activeNames = ['1']
import { ElMessage } from 'element-plus'
const supplierRef = ref(null)
const supplierPersonList = ref([])
const supplierCheckoutList = ref([])
const data = reactive({
    form: {},
    rules: {
        supplierCode: [{ required: true, message: "供应商编码不能为空", trigger: "blur" }],
        // usci: [{ required: true, message: "统一社会信用代码不能为空", trigger: "blur" }, { pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: "请输入正确的社会信用代码", trigger: "blur" },],
        name: [{ required: true, message: "供应商名称不能为空", trigger: "blur" },],
        type: [{ required: true, message: "供应类型不能为空", trigger: ["blur", "change"] }],
        phone: [{ required: false, message: "联系方式不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
        tel: [{ required: false, message: "联系方式不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
        email: [{ required: false, message: "邮箱不能为空", trigger: ["blur", "change"] }, { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: "请输入正确的邮箱", trigger: "blur" }],
        serviceBillPeoTel: [{ required: true, message: "服务单人电话不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
        address: [{ required: true, message: "详细地址不能为空", trigger: "blur" },],
        youxiang: [{ required: false, message: "邮箱不能为空", trigger: "blur" }, { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: "请输入正确的邮箱", trigger: "blur" }],
    }
});
const { form, rules } = toRefs(data);
const tagType = computed(() => {
    return route.query.status == 0 ? '' : 'danger';
});
if (route.query.id) {
    getByIdSupplier({ pid: route.query.id }).then(response => {
        form.value = response.data
        supplierPersonList.value = form.value.supplierPersonList ? form.value.supplierPersonList : []
        supplierCheckoutList.value = form.value.supplierCheckoutList ? form.value.supplierCheckoutList : []
    })
}
const handleEdit = (row) => {
    row.isDisabled = true
}
const handlePersonDel = (row) => {
    const index = supplierPersonList.value.indexOf(row);
    if (index !== -1) {
        supplierPersonList.value.splice(index, 1);
    }
}
//当前时间
// const getCurrentDateTime = () => {
//     const now = new Date();
//     const year = now.getFullYear();
//     const month = String(now.getMonth() + 1).padStart(2, '0');
//     const day = String(now.getDate()).padStart(2, '0');
//     const hours = String(now.getHours()).padStart(2, '0');
//     const minutes = String(now.getMinutes()).padStart(2, '0');
//     const seconds = String(now.getSeconds()).padStart(2, '0');
//     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// }
//选择机台
const handleCheckDel = (row) => {
    const index = supplierCheckoutList.value.indexOf(row);
    if (index !== -1) {
        supplierCheckoutList.value.splice(index, 1);
    }
}
const handleComplete = (row) => {
    row.isDisabled = false
}

const submitForm = () => {
    supplierRef.value.validate((valid) => {
        if (valid) {
            if (form.value.pid) {
                supplierPersonList.value.forEach(item => {
                    item.supplierId = form.value.pid
                })
                supplierCheckoutList.value.forEach(item => {
                    item.supplierId = form.value.pid
                })
                form.value.supplierPersonList = supplierPersonList.value
                form.value.supplierCheckoutList = supplierCheckoutList.value
                addSupplier(form.value).then(response => {
                    if (response.code == 200) {
                        ElMessage({
                            message: '编辑成功',
                            type: 'success',
                        });
                        goBack()
                    }
                })
            } else {
                form.value.status = 0
                // form.value.createBy = userInfo.name
                // form.value.createTime =  getCurrentDateTime()
                form.value.supplierPersonList = supplierPersonList.value
                form.value.supplierCheckoutList = supplierCheckoutList.value
                addSupplier(form.value).then(response => {
                    if (response.code == 200) {
                        ElMessage({
                            message: '新增成功',
                            type: 'success',
                        });
                        goBack()
                    }
                })
            }


        }
    });


}
//  返回
const goBack = () => {
    tagsViewStore.delView(route)
    //router.go(-1)
    // router.push('/basicInfo/supplier')

    if(route.query.moduleCode=="searchMaterialReceipt"){
        router.push('/storage/searchMaterialReceipt')
    }else if(route.query.moduleCode=="searchReturnNote"){
        router.push('/storage/searchReturnNote')//退货单明细
    }else{
        router.push('/basicInfo/supplier')
    }
}
const handleAddPerson = () => {
    supplierPersonList.value.push({ isDisabled: true });
}
const handleAddCheck = () => {
    supplierCheckoutList.value.push({ isDisabled: true });
}

</script>

<style lang="scss" scoped></style>